<template>
	<div id="page-index">
         <div class="center">
		  <charts ref='chart'></charts>
        </div>
		<div class="container">
			<div class="sub-title">今日数据</div>
            <el-row type="flex" class="row-bg sub-data-list">
             <el-col :span="5">
                <i class="material-icons" style="color: #00F;">playlist_add_check</i>
                <div class="sub-data-num">{{ stat.newproduct }}</div>
                <div class="sub-data-title">新增产品</div>
            </el-col>
             <el-col :span="5">
                <i class="material-icons" style="color: rgb(255, 90, 95);">trending_up</i>
                <div class="sub-data-num">{{ stat.newOrder }}</div>
                <div class="sub-data-title">新增订单</div>
            </el-col>
             <el-col :span="5">
                <i class="material-icons" style="color: rgb(102, 177, 25);">portable_wifi_off</i>
                <div class="sub-data-num">{{ stat.fail }}</div>
                <div class="sub-data-title">ERP通信失败</div>
            </el-col>
             <el-col :span="5">
                <i class="material-icons" style="color: rgb(204, 204, 204);">extension</i>
                <div class="sub-data-num">{{ stat.allProduct }}</div>
                <div class="sub-data-title">所有产品</div>
            </el-col>
             <el-col :span="5">
                <i class="material-icons" style="color: rgb(204, 204, 204);">receipt</i>
                <div class="sub-data-num">{{ stat.allOrder }}</div>
                <div class="sub-data-title">所有订单</div>
            </el-col>
            </el-row>
            
            
            <el-row type="flex" class="row-bg-2">
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <div class="sub-title" style="color:red;">版本更新: 2017-08-17
                      <ul>
                        <li>建站后台</li>
                        <li><a href="javascript:;">1. 产品搜索支持域名和二级目录同时拼接搜索</a></li>
                        <li><a href="javascript:;">2. 新增只能修改google字段管理员</a></li>
                        <li><a href="javascript:;">3. 产品复制支持填写不同域名</a></li>
                        <li><a href="javascript:;">4. 属性产品图片可以删除</a></li>
                        <li><a href="javascript:;">5. 修复属性图片上传bug</a></li>
                        <li><a href="javascript:;">6. 下架7月15号之前至目前没有出单的产品（删除可恢复）</a></li>
                        <li>单品站:</li>
                        <li><a href="javascript:;">1. 支持多个fb像素 </a></li>
                        <li><a href="javascript:;">2. 订单点击提交按钮置灰不可再次提交，防止客户多次提交 </a></li>
                        <li><a href="javascript:;">3. 下单失败提供错误代码，更快的定位原因 </a></li>
                        <li><a href="javascript:;">4. 修复泰国站选择地区，市显示错误bug </a></li>
                        <li><a href="javascript:;">5. 增加马来西亚模版style70 </a></li>
                        <li><a href="javascript:;">6. 修改马来西亚邮编必填 </a></li>
                      </ul>
                    </div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <div class="sub-title">建站问题: 
                      <ul>
                        <li>
                          <a target="_blank" href="http://bbs.stosz.com/forum.php?mod=viewthread&tid=91&extra=page%3D1">怎么添加多产品套餐?</a>
                        </li>
                        <li>
                          <a target="_blank" href="http://bbs.stosz.com/forum.php?mod=viewthread&tid=92&extra=page%3D1">怎么添加赠品(附件)?</a>
                        </li>
                        <li>
                          <a target="_blank" href="http://bbs.stosz.com/forum.php?mod=viewthread&tid=89&extra=page%3D1">点击“选择产品时”找不到选择的产品?</a>
                        </li>
                        <li>
                          <a target="_blank" href="http://bbs.stosz.com/forum.php?mod=viewthread&tid=88&extra=page%3D1">如何在建站后台添加以及修改属性?</a>
                          </li>
                        <li>
                          <a target="_blank" href="http://bbs.stosz.com/forum.php?mod=viewthread&tid=87&extra=page%3D1">如何区分属性组id，属性id和产品erpid?</a>
                          </li>
                          <li>
                            <a target="_blank" href="http://bbs.stosz.com/forum.php?mod=viewthread&tid=92&extra=page%3D1">附件怎么也可以选择属性?</a>
                          </li>
                          <li>
                            <a target="_blank" href="http://bbs.stosz.com/forum.php?mod=viewthread&tid=86&extra=page%3D1">缩略图如何替换和删除?</a>
                            </li>
                          <li>
                            <a target="_blank" href="http://bbs.stosz.com/forum.php?mod=viewthread&tid=90&fromuid=30">已经在ERP添加了域名，但在建站后台显示找不到该域名信息?</a>
                            </li>
                      </ul>
                    </div>
                  </div>
                </el-col> 
            </el-row>
        </div>
	</div>
</template>
 
<script>
import charts from './charts.vue'
    
Object.entries = Object.entries || function(obj){
    return Object.keys(obj).map(function(x){
        return [x, obj[x]]
    });
}
export default {   
  data () {
    return {
        stat: {
            newproduct: 0
            , newOrder: 0
            , fail: 0
            , allProduct: 0
            , allOrder: 0
        }
    }
  }, components: { charts }, 
  mounted() {
        
     window.addEventListener('resize', (e) => {
        Vue.rootHub.$emit('updateStat');
        Vue.rootHub.$emit('updateChart');
     }, false);
     
      this.get();
  }, methods: {
    get(){
        this.$service('chartData').then(res => {
          let names = [], views = [], orders = [], pers = [];
          for(let [name, {view, order}] of Object.entries(res.body).map(([a, b]) => [a.replace("style", ""), b]).sort(([a, _], [b, __]) => Number.parseInt(a) - Number.parseInt(b))){
              names.push(name);
              views.push(view);
              orders.push(order);
              pers.push(view == 0 ? 0 : Math.floor(order / view * 10000) / 100);
          }
          this.$refs.chart.setParams(names, views, orders, pers);
        });
       this.$service('indexData').then(res => {
            this.stat = {
                newproduct: res.body.dayProductNum
                , newOrder: res.body.dayOrderNum
                , fail: res.body.failNum
                , allProduct: res.body.product
                , allOrder: res.body.allOrderNum
            }
       });
    }
  }
}
</script>

  